<template>
    <div class="flexbox flexcenter">
        <SaveModel ref="save_model"/>
        <TkModel ref="tk_model" @sessionSave="sessionSave" :dataForm="dataForm"/>
        <el-popover placement="bottom" width="460" trigger="click">
            <div class="yusuan_num">创意组</div>
            <div class="yusuan_list">
                <div class="yusuan_item flexbox flexcenter flexbetween"  @click="selectModel(item,index)" :class="{'active':index==dataForm.creatives_index}" v-for="(item,index) in dataForm.creatives_base.creatives_class" :key="index">
                    <img src="@/assets/img/market_checked.svg" alt="" class="ys_check">
                    <el-input v-model="item.creaname" placeholder="请输入内容" @change="sessionSave" size="small" class="ys_input"></el-input>
                    <div class="yusuan_edit flexbox flexcenter">
                        <el-tooltip content="存为模板" placement="top">
                            <span class="icon_btn" @click.stop="saveModel(item,3,'creaname')"><img src="@/assets/img/ys_icon1.svg" alt=""></span>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <span class="icon_btn" @click.stop="deletModel(index)"><img src="@/assets/img/ys_icon2.svg" alt=""></span>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="yusuan_btn flexbox flexbetween">
                <el-button size="mini" style="width:222px" @click="addModel">添加创意</el-button>
                <el-button size="mini" style="width:222px" @click="choiceModel">选择模板</el-button>
            </div>
            <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                <span class="select_text">{{dataForm.creatives_base.creatives_class[dataForm.creatives_index].creaname}}</span>
                <span class="el-icon-caret-bottom"></span>
            </div>
        </el-popover>
        <div class="ct_all">创意素材总数：<span class="blue">{{getMaxLength}}</span>/20（创意素材总数不能超过 20 个）</div>
    </div>
</template>

<script>
import SaveModel from './SaveModel'
import TkModel from './TkModel'
export default {
    components: {
        SaveModel,
        TkModel
    },
    props: ["dataForm"],
    name: "",
    data() {
        return {};
    },
    computed:{
        getMaxLength(){
            let list = this.dataForm.creatives_base.creatives_class
            let num = 0
            for(let i in list){
                num += list[i].creatives.length
            }
            return num
        }
    },
    created() {},
    methods: {
        sessionSave() {
            this.$emit("sessionSave");
        },

        saveModel(item, type,name) {
            let that = this;
            this.budgetCheck(that.dataForm.creatives_index, function () {
                that.$refs.save_model.getData(item,type,name)
            });
        },


        // 选择模板
        selectModel(val, index) {
            let that = this;
            this.budgetCheck(that.dataForm.creatives_index, function () {
                that.dataForm.creatives_index = index
            });
            this.sessionSave();
        },

        //添加模板
        addModel(){
            let that = this;
            if(that.dataForm.creatives_base.creatives_class.length>=20){
                return
            }else{
                this.budgetCheck(that.dataForm.creatives_index, function () {
                    let list = that.dataForm.creatives_base.creatives_class;
                    let nodeData = {
                        creaname: "创意分组"+(that.dataForm.creatives_base.creatives_class.length+1),
                        call_to_action: "APPLY_NOW",
                        card_type: "",
                        card_tags: [],
                        card_show_price: false,
                        item_group_ids: [],
                        vertical_video_strategy: "SINGLE_VIDEO",
                        creatives: [],
                    }
                    list.push(nodeData)
                    that.dataForm.creatives_index = list.length - 1
                });
            }
            this.sessionSave();
        },

        // 选择模板
        choiceModel(){
            let max_length = 20 - this.dataForm.creatives_base.creatives_class.length
            this.$refs.tk_model.getData(3,max_length,'creaname')
        },

        // 删除模板
        deletModel(index){
            let that = this
            if(that.dataForm.creatives_base.creatives_class.length == 1){
                return
            }else{
                that.dataForm.creatives_base.creatives_class.splice(index,1)
                that.dataForm.creatives_index = 0
            }
            this.sessionSave();
        },

        // 预算出价校验
        budgetCheck(index, callback) {
            let list = this.dataForm.creatives_base.creatives_class;
            
            if (list[index].item_group_ids.length==0) {
                this.$message.error("请添加商品");
                return;
            }
            if (list[index].creatives.length==0) {
                this.$message.error("请添加帖子");
                return;
            }
            if (list[index].card_type=="PRODUCT") {
                if(list[index].card_tags.length==0){
                    this.$message.error("请选择卡片标签");
                    return;
                }
            }
            callback();
        },

    }
};
</script>


<style scoped>
.ct_all{
    font-size: 14px;
    color: #B4B7BD;
    margin-left: 16px;
}
.blue{
    color: #4475FF;
}
</style>

